<script lang="ts" setup>
import type { VbenFormProps } from '#/adapter/form'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useTableCURD } from '#/hooks/useTableList'
import { Page } from '@vben/common-ui'
import { Input, Image, Modal, message, Spin } from 'ant-design-vue'
import { ref,onMounted } from 'vue'
import WxChat from '../components/wx.vue'
import TableAction from '#/components/TableAction/index.vue'
import { plcolumns, formSchema } from '../data/table'
import type { TableListItem } from '../use/api'
import { PageApi } from '../use/api'

// 定义 loading 状态
const loading = ref(false)

// 添加 props 定义
const props = defineProps<{
  id?: number | string,
  avatarUrl?: string
}>()
// 当接收的id变化时可以执行相应操作
onMounted(() => {
  if (props.id) {
    console.log('收到参数:', props.id, props.avatarUrl)
    reload()
  }
})
const avatarUrl = ref(props.avatarUrl)
const itemObj:any = ref({})//目标用户id
const formObj = ref({
    monitorId: props.id
})
const formOptions: VbenFormProps = {
    schema: formSchema
}
const openc = ref(false)
const openZj = ref(false)
const content = ref('')


const gridOptions: VxeGridProps<any> = {
    columns: plcolumns,
    proxyConfig: {
        ajax: {
            query: async ({ page }, formValues) => {
                if (formValues.createTime) {
                    formValues.startTime = formValues.createTime[0]
                    formValues.endTime = formValues.createTime[1]
                    delete formValues.createTime
                }
                const res = await PageApi.getCommentList({
                    ...formObj.value,
                    ...formValues,
                    limit: page.pageSize,
                    page: page.currentPage
                })
                return {
                    items: res.records,
                    total: res.total
                }
            }
        }
    },
    cellConfig: {
        height: 120
    }
}

/**
 * 表格配置
 */
const { Grid, reload } = useTableCURD<TableListItem>({
    formOptions,
    gridOptions,
    modalOptions: {}
})
/**
 * table 操作
 * @param record
 */
const chatInfo:any = ref({})
function getActions(record: TableListItem) {
    const arr: any[] = [
        {
            label: '直接回复',
            onClick: () => {
                itemObj.value = record
                openZj.value = true
                // 已读操作
                markRead(record)
            }
        }
    ]

    return arr
}

// 处理直接回复确认
const handleOk = async () => {
    if (content.value) {
        loading.value = true
        const res = await PageApi.send({
            targetUserId: itemObj.value.formUserId,
            id: itemObj.value.id,
            messageText: content.value,
            monitorId: formObj.value.monitorId,
        })
        if (res) {
            message.success('回复成功')
            openZj.value = false
            content.value = ''
            reload()
        }
        loading.value = false
    } else {
        message.error('请输入回复内容')
        return
    }
}
// 标记为已读
    const markRead = async (item:any) => {
        await PageApi.getMaskRead({
            monitorId: formObj.value.monitorId,
            username: item.username,
            fromUsername: item.formUsername,
        })
    }
</script>

<template>
    <Page>
        <Grid>
            <template #url="{ row }">
                <Image :width="200" :src="row.url" />
            </template>
            <template #isUsed="{ row }">
                {{ row.isUsed ? '是' : '否' }}
            </template>
            <template #action="{ row }">
                <TableAction :actions="getActions(row)" />
            </template>
            <template #isReply="{ row }">
                {{ row.isReply ? '已回复' : '未回复' }}
            </template>
        </Grid>
        <Modal :title="`${chatInfo.username}和${chatInfo.formUsername}的聊天窗口`" v-model:open="openc" width="900px">
            <WxChat :avatar-url="avatarUrl" :chat-info="chatInfo" :key="chatInfo.id"/>
        </Modal>
        <Modal :title="`直接回复`" v-model:open="openZj" @ok="handleOk">
            <Spin :spinning="loading">
                <Input.TextArea v-model:value="content" />
            </Spin>
        </Modal>
    </Page>
</template>
